Switching to Angular by Minko Gechev

Author:Minko Gechev
Language: eng
Format: mobi, epub, pdf
Tags: COM060160 - COMPUTERS / Web / Web Programming, COM060180 - COMPUTERS / Web / Web Services and APIs, COM051260 - COMPUTERS / Programming Languages / JavaScript
Publisher: Packt Publishing
Published: 2017-10-31T08:26:31+00:00

Event bubbling

In Angular, we have the same bubbling behavior we're used to in the DOM. For instance, let's suppose we have the following template:

<input-box inputPlaceholder="New todo..." buttonLabel="Add" (click)="handleClick($event)" (inputText)="addTodo($event)"> </input-box>

The template declaration of the input-box component looks like this:

<input #todoInput [placeholder]="inputPlaceholder"> <button (click)="emitText(todoInput.value); todoInput.value = '';"> {{buttonLabel}} </button>

Once the user clicks on the button defined within the template of the input-box component, the handleClick($event) expression will be evaluated.

Further, the target property of the first argument of handleClick will be the button itself, but the currentTarget property will be the input-box element. The event will bubble the same way if we're not using Angular. At some point, it will reach the document unless a handler along the way doesn't stop its propagation.

In contrast, if we have a custom @Output decorator, the event will not bubble and instead of a DOM event object, the value of the $event variable will be the value that we pass to the emit method of the output.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.